<template>
  <div>
    <business-form
      :formDateObj="formDateObj"
      :formData="formData"
      :formDataText="formDataText"
    ></business-form>
    <div class="btn" style="background-color: white; margin-top: 20px">
      <a @click="countChange()">全部{{ Count }}</a>
      <a @click="countChange(1)">新建{{ count[1] }}</a>
      <a @click="countChange(2)">已装车{{ count[2] }}</a>
      <a @click="countChange(3)">运输中{{ count[3] }}</a>
      <a @click="countChange(4)">到达终端网点{{ count[4] }}</a>
      <a @click="countChange(5)">拒收{{ count[5] }}</a>
    </div>
    <el-row>
      <el-card>
        <el-table
          border
          stripe
          style="text-align: center; margin-top: 15px; margin-bottom: 20px"
          :data="tableDate"
        >
          <template slot="empty">
            <img
              height="270px"
              src="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png"
              alt=""
              srcset=""
            />
          </template>
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column
            width="190"
            prop="id"
            label="运单编号"
          ></el-table-column>
          <el-table-column
            prop="orderId"
            width="200"
            label="订单编号"
          ></el-table-column>
          <el-table-column width="160" prop="status" label="运单状态">
            <template #default> </template>
          </el-table-column>
          <el-table-column prop="schedulingStatus" width="160" label="调度状态">
            <template #default> </template>
          </el-table-column>
          <el-table-column
            prop="startAgencyName"
            width="160"
            label="起始营业部"
          >
          </el-table-column>
          <el-table-column prop="endAgencyName" width="160" label="终点营业部">
          </el-table-column>
          <el-table-column
            prop="currentAgencyName"
            width="160"
            label="当前所在机构"
          >
          </el-table-column>
          <el-table-column prop="nextAgencyName" width="160" label="下一个机构">
          </el-table-column>
          <el-table-column
            prop="totalVolume"
            width="180"
            label="货品总体积（立方米）"
          >
          </el-table-column>
          <el-table-column
            prop="totalWeight"
            width="160"
            label="货品总重量（千克）"
          ></el-table-column>
          <el-table-column prop="created" width="160" label="创建时间">
          </el-table-column>
          <el-table-column prop="updated" width="160" label="更新时间">
          </el-table-column>
          <el-table-column prop="" label="操作" fixed="right" width="140">
            <template #default>
              <el-button style="color: deepskyblue" type="text"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getYunRenApi, getYunRenNumberApi } from "@/api/dispatch";

export default {
  data() {
    return {
      count: "",
      tableDate: [],
      formDateObj: {
        schedulingStatus: "",
        orderId: "",
        id: "",
        startAgencyId: "",
        endAgencyId: "",
        currentAgencyId: "",
      },
      formData: [
        { schedulingStatus: "" },
        { orderId: "" },
        { id: "" },
        { startAgencyId: "" },
        { endAgencyId: "" },
        { currentAgencyId: "" },
      ],
      formDataText: [
        {
          labels: "满载状态:",
          text: "请输入满载状态",
        },
        {
          labels: "任务分配状态:",
          text: "请输入任务分配状态",
        },
        {
          labels: "任务编号:",
          text: "请输入任务编号",
        },
        {
          labels: "目的地机构:",
          text: "请输入目的地机构",
        },
        {
          labels: "起始地机构:",
          text: "请输入起始地机构",
        },
        {
          labels: "车牌号码:",
          text: "请输入车牌号码",
        },
      ],
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    Count() {
      return (
        +this.count[1] +
        +this.count[2] +
        +this.count[3] +
        +this.count[4] +
        +this.count[5]
      );
    },
  },
  created() {
    this.getYunRenInfo();
  },
  methods: {
    countChange() {},
    async getYunRenInfo() {
      const res = await getYunRenApi(this.page);
      console.log(res.data.data);
      const res1 = await getYunRenNumberApi();
      console.log(res1.data.data);
      this.count = res1.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  border-radius: 4px;
  height: 50px;
  a {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 120px;
    color: black;
    float: left;
  }
  a:active {
    background-color: rgb(255, 238, 235);
    color: rgb(225, 85, 54);
  }
}
</style>
